<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<link href="css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" type="text/css" href="js/plugins/cropper/css/cropper.min.css" />
		<script src="js/jquery-3.1.1.min.js"></script>
		<link href="css/mui.picker.min.css" />
		<link href="css/mui.poppicker.css">
		<!--<link rel="stylesheet" type="text/css" href="css/ymk.css" />
		<link rel="stylesheet" type="text/css" href="css/style.css" />-->
		<script src="js/mui.min.js"></script>
		<script src="js/mui.picker.min.js"></script>
		<script src="js/mui.poppicker.js"></script>
		<link href="css/mui.picker.min.css" rel="stylesheet" />
		<link href="css/mui.poppicker.css" rel="stylesheet" />
		<script type="text/javascript" src="js/jquery-form.js"></script>
		<script type="text/javascript" src="js/my.js" ></script>
		<style type="text/css">
			* {
				touch-action: none;
			}
			
			.imageup {
				width: 100px;
				height: 36px;
				line-height: 36px;
			}
			
			.button {
				width: 100px;
				height: 50px;
				line-height: 50px;
			}
			
			.mui-bar {
				background-color: dodgerblue;
			}
			
			.mui-title {
				color: #FAFAFA;
			}
			
			#imgBox {
				height: 200px!important;
				width: 200px!important;
				margin: 30px auto;
				background: url('js/plugins/cropper/images/bg.png');
			}
			
			.btn {
				width: 80%;
				margin: 20px auto;
				display: block;
				margin-top: 50px;
				margin-bottom: 30px;
				border: 0px;
				font-size: 17px;
				padding: 10px 0px;
				background: dodgerblue;
				color: #fff;
				border-radius: 0px;
			}
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav" style="background: dodgerblue;">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left" style="color: white;"></a>
			<h1 class="mui-title" style="color: white;">租金申请</h1>
		</header>
		<div class="mui-content add-address-div">
			<form class="mui-input-group public-lable-txt">

				<div class="mui-input-row">
					<label>每月租金：</label>
					<input type="text" id="zujin" name="" placeholder="请输入租金/元" />
				</div>
				<div class="mui-input-row">
					<label>开始日期：</label>
					<input type="text" id="start" name="start" placeholder="请选择开始日期" />
				</div>
				<div class="mui-input-row">
					<label>截止日期：</label>
					<input type="text" id="end" name="end" onblur="endevent()" class="mui-input-clear" placeholder="请选择到期日期" />
				</div>
				<div>
					<input type="hidden" id="days" />
				</div>
				<div class="mui-input-row" style="margin-bottom: 20px;">
					<label>应交总额：</label>
					<input type="text" id="money" name="money" readonly="readonly" placeholder="总额/元" />
				</div>
			</form>
			<input type="button" id="upload" value="上传图片" style="background:  #1FBBA6" />
			<div id="imgBox">
				<img id="userImage_id" width="200" height="200" />
			</div>
			<table align="center">
				<tr>
					<td style="padding:2px 5px;"><button type="button" disabled id="scaleX_id" class="mui-btn mui-btn-blue toolbutton">左右变换</button></td>
					<td style="padding:2px 5px;"><button type="button" disabled id="scaleY_id" class="mui-btn mui-btn-blue toolbutton">上下变换</button></td>
					<td style="padding:2px 5px;"><button type="button" disabled id="rotateMax_id" class="mui-btn mui-btn-blue toolbutton">旋转90°</button></td>
				</tr>

				<td colspan="3" style="padding:5px 5px;"><button type="button" id="confirm_id" class="mui-btn mui-btn-green mui-btn-block toolbutton" style="width: 100%;height: 50px;">确定并保存</button> </td>

			</table>
			<!--<button class="btn" id="confirm_id">确认</button>-->
			<!--<div style="padding: 10px; color:red;">
					上传后图片服务端下载地址为：<span id="imagePath_div"></span>
				</div>-->

		</div>
		<script src="js/mui.min.js"></script>
		<script type="text/javascript" src="js/plugins/jquery-3.1.1.slim.min.js"></script>
		<script type="text/javascript" src="js/plugins/cropper/js/cropper.min.js"></script>
		<script type="text/javascript" charset="utf-8">
			mui.init();

			var userInfo = JSON.parse(localStorage.getItem("userInfo"));
			var url = localStorage.getItem("url");

			/*var username = userInfo.username;*/
			var endTime1 ;

			var start = document.getElementById("start");
			var end = document.getElementById("end");
			var realUrl=url+"/user/getUser";
			mui.ajax(realUrl, {
				data: {
					id: userInfo,
				},

				//服务器返回json格式数据 
				type: 'post', //HTTP请求类型
				timeout: 10000, //超时时间设置为10秒；
				success: function(data) {
					if(data.code == 0) {
						endTime1=data.data.endTime;
						
					}

				},
				error: function(xhr, type, errorThrown) { //异常处理；
					console.log(type);
				}
			});

			mui.plusReady(function() {
				plus.navigator.setStatusBarBackground("#1FBBA6");
				document.getElementById("upload").addEventListener("tap", function() {
					var editButtons = new Array();
					editButtons.push({
						title: "拍照上传",
						style: "default"
					});
					editButtons.push({
						title: "从相册选择",
						style: "default"
					});
					plus.nativeUI.actionSheet({
						cancel: "取消",
						buttons: editButtons
					}, function(e) {
						var index = e.index;
						switch(index) {
							case 1:
								captureImage(); //拍照
								break;
							case 2:
								selectImage(); //相册选择
								break;
						}
					});
				});
				document.getElementById("scaleX_id").addEventListener("tap", function() {
					window._scaleX = window._scaleX * -1;
					$("#userImage_id").cropper("scaleX", window._scaleX);

				});
				document.getElementById("scaleY_id").addEventListener("tap", function() {
					window._scaleY = window._scaleY * -1;
					$("#userImage_id").cropper("scaleY", window._scaleY);
				});
				document.getElementById("rotateMax_id").addEventListener("tap", function() {
					$("#userImage_id").cropper("rotate", 90);
				});
				//确定裁切
				document.getElementById("confirm_id").addEventListener("tap", function(e) {
					
					var dataURL = $("#userImage_id").cropper("getCroppedCanvas", {
						width: 200,
						height: 200
					});
					var imgUrl = dataURL.toDataURL("image/png", 1);
					//		$("#userImage_id").attr("src" , imgUrl);
					$("#userImage_id").cropper("replace", imgUrl);
					$("#userImage_id").cropper("clear"); //裁切完成取消显示裁切框
					$("#userImage_id").cropper("disable");
					//确定裁切后销毁裁切组件，标记一下，下次继续裁切时需要初始化一下裁切组件
					window.imageDisable = true;
					//禁用几个功能按钮
					$("button.toolbutton").prop("disabled", true);
					//向后台提供数据
					uploadFile(imgUrl);

				});
				//初始化裁切组件
				initImageCropper();
			});

			//拍照
			function captureImage() {
				var cmr = plus.camera.getCamera(2);
				cmr.captureImage(
					function(path) {
						//将图片地址转换
						plus.io.resolveLocalFileSystemURL(path, function(entry) {
							var newPath = entry.toLocalURL() + "?version=" + Math.random();
							loadImage(newPath);
						});
					},
					function(error) {
						mui.toast(error.message);
					}, {
						filename: "_documents/"
					}
				);

			}

			//文件上传
			function uploadFile(image) {
				var starttime = $("#start").val();
				var endtime = $("#end").val();
				
				var money = $("#money").val();
				var date1 = new Date(starttime);
				var date2 = new Date(endtime);
				if($("#zujin").val() == '') {
					mui.alert("租金不能为空");
					return;
				}

				if(starttime == '') {
					mui.alert("入住时间不能为空");
					return;
				}
				if(endtime == '') {
					mui.alert("到期时间不能为空");
					return;
				}

				var rootPath = localStorage.getItem("url");
				var url = rootPath + "/phone/test";

				mui.ajax(url, {
					dataType: "json",
					type: "post",
					data: {
						imageBase64: image,
						user_id: userInfo,
						money: money,
						startTime: starttime,
						endTime: endtime,
						days: $("#days").val(),
						msg:1
					},
					success: function(data) {
						if(data.result == "success") {
							mui.toast("成功!");
							my.jump("index.html","rent_apply");
							return;
						}
						mui.toast(data.message);
					},
					error: function(a, b, c) {
						mui.toast("上传头像出现错误，请稍后再试!");
					}
				});
			}

			function initImageCropper() {
				//初始化组件
				$("#userImage_id").cropper({
					aspectRatio: 3 / 3,
					autoCropArea: 1,
					dragMode: "move", //设置移动图片、重新绘制选图区域
					cropBoxResizable: false,
					//movable: true,//是否允许移动裁切框
					zoomable: true, //是否允许放大图片
					guides: true, //取消显示裁切线中间的虚线网格
					minContainerWidth: 200,
					minContainerHeight: 200,
					minCanvasWidth: 200,
					minCanvasHeight: 200,
					crop: function(data) {
						//初始化
						window._scaleX = data.scaleX;
						window._scaleY = data.scaleY;
					}
				});
			}

			//选择图片
			function selectImage() {
				plus.gallery.pick(function(path) {
					loadImage(path);
				}, function(e) {
					mui.toast("没有选择图片.");
				});
			}

			//确定选择图片
			function loadImage(path) {
				var img = document.getElementById("userImage_id");
				img.src = path;
				if(window.imageDisable == true) {
					$("#userImage_id").cropper("enable");
				}
				$("#userImage_id").cropper("replace", path);
				//启用几个功能按钮
				$("button.toolbutton").prop("disabled", false);
				document.getElementById("userImage_id").onclick = function() {
					plus.runtime.openFile(path);
				}
			}
			/*----截止时间判断-----*/
			function endevent() {
				var i = 0;
				i = $("#zujin").val() / 30;

				var starttime = $("#start").val();
				var endtime = $("#end").val();
				var date1 = new Date(starttime);
				var date2 = new Date(endtime);

				if(date1.getTime() > date2.getTime()) {
					mui.alert("截止时间应大于开始时间");
					return;
				}
				var j = 0;
				j = date2.getTime() - date1.getTime();
				k = (date2 - date1) / 1000 / 60 / 60 / 24;
				//alert(j);
				var n = Math.round(k);
				$("#days").val(n);
				//alert(n);
				var m = i * n;
				var d = Math.round(m);
				//alert(d);
				$("#money").val(d);

			}

			/*日期格式设置*/
			
				start.addEventListener('tap', function() {

					var dDate = new Date();
					var minDate = new Date();
					//最小时间
					minDate.setFullYear(2018, 0, 1);
					var maxDate = new Date();
					//最大时间
					maxDate.setFullYear(2026, 11, 31);
					plus.nativeUI.pickDate(function(e) {
						var c = e.date;
						mui.toast('您选择的日期是:' + c.getFullYear() + "-" + (c.getMonth() + 1) + "-" + c.getDate());
						/*start.value = d.getFullYear() + "-" + (d.getMonth() + 1) + "-" + d.getDate();*/
						var date = new Date(start.value);
						plus.nativeUI.pickTime(function(e) {
							var d = e.date;
							mui.toast("选择的时间：" + d.getHours() + ":" + d.getMinutes() + ":" + d.getSeconds());
							start.value = c.getFullYear() + "-" + (c.getMonth() + 1) + "-" + c.getDate() + " " + d.getHours() + ":" + d.getMinutes() + ":" + d.getSeconds();

						});
						

					}, function(e) {
						mui.toast("您没有选择日期");
					}, {
						title: '请选择日期',
						date: dDate,
						minDate: minDate,
						maxDate: maxDate
					});

					function pickTime() {

						plus.nativeUI.pickTime(function(e) {
							var d = e.date;
							mui.toast("选择的时间：" + d.getHours() + ":" + d.getMinutes());
							var time = d.getHours() + ":" + d.getMinutes();

						});

					}

				});
			

			/*--------结束时间-------*/

			end.addEventListener('tap', function() {

				var dDate = new Date();
				var minDate = new Date();
				//最小时间
				minDate.setFullYear(2018, 0, 1);
				var maxDate = new Date();
				//最大时间
				maxDate.setFullYear(2026, 11, 31);
				plus.nativeUI.pickDate(function(e) {
					var c = e.date;

					//var date = new Date(end.value);
					plus.nativeUI.pickTime(function(e) {
						var d = e.date;
						mui.toast("选择的时间：" + d.getHours() + ":" + d.getMinutes() + ":" + d.getSeconds());
						end.value = c.getFullYear() + "-" + (c.getMonth() + 1) + "-" + c.getDate() + " " + d.getHours() + ":" + d.getMinutes() + ":" + d.getSeconds();

					});

				}, function(e) {
					mui.toast("您没有选择日期");
				}, {
					title: '请选择日期',
					date: dDate,
					minDate: minDate,
					maxDate: maxDate
				});

				function pickTime() {

					plus.nativeUI.pickTime(function(e) {
						var d = e.date;
						mui.toast("选择的时间：" + d.getHours() + ":" + d.getMinutes());
						var time = d.getHours() + ":" + d.getMinutes();

					});

				}

			});
		</script>
	</body>

</html>